<template>
  <div>
    <PersonNav></PersonNav>
    <div id="personalCenter" style="transition: all .2s">
      <transition appear name="slide-fade">
        <router-view></router-view>
      </transition>
    </div>
    <WebFooter></WebFooter>
  </div>
</template>

<script>
import PersonNav from "@/components/center/PersonNav";
import WebFooter from "@/components/common/WebFooter";

export default {
  name: "PersonalCenter",
  components: {PersonNav,WebFooter},
}
</script>

<style scoped>
.slide-fade-enter-active {
  transition: all .2s ease;
  transition-delay: .2s;
}
.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>